<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Menus &amp; toolbars in Ruby Qt</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, menu, toolbar, Qt, programming, Ruby, Linux">
<meta name="description" content="In this part of the Ruby Qt tutorial, we will
cover memus and toolbars.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Menus &amp; toolbars</h1>

<p>
In this part of the Ruby Qt programming tutorial, we will work with menus and toolbar. 
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 

<p>
A menubar is one of the most visible parts of the GUI application. 
It is a group of commands located in various menus. While in console 
applications you had to remember all those arcane commands, here we have 
most of the commands grouped into logical parts. There are accepted standards
that further reduce the amount of time spending to learn a new application.
Menus group commands that we can use in an application. 
Toolbars provide a quick access to the most frequently used commands.
</p>


<h2>Simple menu</h2>

<p>
The first example will show a simple menu. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program shows a simple
# menu. It has one action, which
# will terminate the program, when
# selected. 
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: November 2012

require 'Qt'


class QtApp &lt; Qt::MainWindow

    def initialize
        super
        
        setWindowTitle "Simple menu"
        
        init_ui
        
        resize 250, 150
        move 300, 300

        show
    end
    
    def init_ui
        quit = Qt::Action.new "&amp;Quit", self

        file = menuBar().addMenu "&amp;File"
        file.addAction quit

        connect(quit, SIGNAL("triggered()"), 
            Qt::Application.instance, SLOT("quit()"))
    end
        
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
We have a menubar, a menu and an action. In order to work with menus,
we must inherit from <code>MainWindow</code> widget. 
</p>

<pre class="explanation">
quit = Qt::Action.new "&amp;Quit", self
</pre>

<p>
This code line creates a <code>Action</code>. Each <code>Menu</code> 
has one or more action objects. Note the ampersand (&amp;) character. It creates a 
shortcut for the item. Alt + Q. It also underlines the Q character. 
The shortcut is active, when the file menu is dropped down. 
</p>

<pre class="explanation">
file = menuBar().addMenu "&amp;File"
file.addAction quit
</pre>

<p>
We create a <code>Menu</code> object. The ampersand character 
creates a shortcut. Alt + F. 
The consecutive shortcuts Alt + F, Alt + Q quit the application. 
</p>

<pre class="explanation">
connect(quit, SIGNAL("triggered()"), 
    Qt::Application.instance, SLOT("quit()"))
</pre>

<p>
When we select this option from the menu, the application quits. 
</p>

<img src="/img/gui/qtruby/simplemenu.png" alt="Simple menu">
<div class="figure">Figure: Simple menu</div>


<h2>Submenu</h2>

<p>
A submenu is a menu plugged into another menu object. The next example demonstrates this. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program creates a
# submenu
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: November 2012

require 'Qt'


class QtApp &lt; Qt::MainWindow

    def initialize
        super
        
        setWindowTitle "Submenu"
        
        init_ui
        
        resize 280, 200
        move 300, 300

        show
    end
    
    def init_ui
        quit = Qt::Action.new "&amp;Quit", self

        file = menuBar().addMenu "&amp;File"
        impm = Qt::Menu.new "Import"

        seeds = Qt::Action.new "Import news feed...", self
        marks = Qt::Action.new "Import bookmarks...", self
        mail = Qt::Action.new "Import mail...", self
        
        impm.addAction seeds
        impm.addAction marks
        impm.addAction mail

        file.addMenu impm
        file.addAction quit

        connect(quit, SIGNAL("triggered()"), 
            Qt::Application.instance, SLOT("quit()"))
    end    
    
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
In the example, we have three options in a submenu of a file menu. 
</p>

<pre class="explanation">
file = menuBar().addMenu "&amp;File"
impm = Qt::Menu.new "Import"
</pre>

<p>
We have two <code>Menu</code> objects. The file menu and the import menu. 
</p>

<pre class="explanation">
seeds = Qt::Action.new "Import news feed...", self
marks = Qt::Action.new "Import bookmarks...", self
mail = Qt::Action.new "Import mail...", self
</pre>

<p>
We create three action objects.  
</p>

<pre class="explanation">
impm.addAction seeds
impm.addAction marks
impm.addAction mail
</pre>

<p>
We add the action objects into the import menu. 
</p>

<pre class="explanation">
file.addMenu impm
</pre>

<p>
Finally, we add the import menu into the file menu. 
</p>

<img src="/img/gui/qtruby/submenu.png" alt="Submenu">
<div class="figure">Figure: Submenu</div>



<h2>Images, menus, separators</h2>

<p>
In the following example, we will further enhance our previous application. 
We will add icons to the menus, use shortcuts and a separator. Note that the
Gnome desktop might be configured not to display menu icons by default. In such a 
case we need to enable the <code>menu_have_icons</code> option in the Gnome
interface configuration. 
</p>

<pre>
gconftool-2 --type Boolean --set /desktop/gnome/interface/menus_have_icons True
</pre>

<p>
We can use the above command or the <i>gconf-editor</i> tool. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program shows image
# menus, shortcuts and a separator
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: November 2012

require 'Qt'


class QtApp &lt; Qt::MainWindow

    def initialize
        super
        
        setWindowTitle "Image menu"
        
        init_ui
        
        resize 280, 200
        move 300, 300

        show
    end
    
    def init_ui
        newpix = Qt::Icon.new "new.png"
        openpix = Qt::Icon.new "open.png"
        quitpix = Qt::Icon.new "exit.png"

        newa = Qt::Action.new newpix, "&amp;New", self
        open = Qt::Action.new openpix, "&amp;Open", self
        quit = Qt::Action.new quitpix, "&amp;Quit", self
        quit.setShortcut "Ctrl+Q"
        
        file = menuBar().addMenu "&amp;File"
        file.addAction newa
        file.addAction open
        file.addSeparator
        file.addAction quit

        connect(quit, SIGNAL("triggered()"), 
            Qt::Application.instance, SLOT("quit()"))
    end    
    
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
In our example, we have one menu with three actions. Only the quit action will 
actually do something, if we select it. We also create a separator and a Ctrl + Q shortcut,
which will terminate the application. 
</p>

<pre class="explanation">
newpix = Qt::Icon.new "new.png"
openpix = Qt::Icon.new "open.png"
quitpix = Qt::Icon.new "exit.png"
</pre>

<p>
These are png images, that we will use in the application. 
</p>

<pre class="explanation">
newa = Qt::Action.new newpix, "&amp;New", self
open = Qt::Action.new openpix, "&amp;Open", self
quit = Qt::Action.new quitpix, "&amp;Quit", self
</pre>

<p>
Here we create three action objects. The first parameter is the <code>Icon</code>.
</p>

<pre class="explanation">
quit.setShortcut "Ctrl+Q"
</pre>

<p>
This line creates a shortcut. By pressing this shortcut, we will run the quit action, 
which will quit the application. 
</p>

<pre class="explanation">
file.addSeparator
</pre>

<p>
We create a separator. The separator is a horizontal line, which enables us to 
group menu actions into some logical parts. 
</p>


<img src="/img/gui/qtruby/imshsep.png" alt="Images, shortcut and a separator">
<div class="figure">Figure: Images, shortcut and a separator</div>



<h2>A toolbar</h2>

<p>
The <code>ToolBar</code> class provides a movable panel that contains a
 set of controls, which provide a quick access to the application actions. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program creates a 
# toolbar
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: November 2012

require 'Qt'


class QtApp &lt; Qt::MainWindow

    def initialize
        super
        
        setWindowTitle "Toolbar"
        
        init_ui
        
        resize 250, 150
        move 300, 300

        show
    end
    
    def init_ui
        newpi = Qt::Icon.new "new2.png"
        openpi = Qt::Icon.new "open2.png"
        quitpi = Qt::Icon.new "exit2.png"

        toolbar = addToolBar "main toolbar"
        toolbar.addAction newpi, "New File" 
        toolbar.addAction openpi, "Open File"
        toolbar.addSeparator
        quit = toolbar.addAction quitpi, "Quit Application"

        connect(quit, SIGNAL("triggered()"), 
            Qt::Application.instance, SLOT("quit()"))
    end
    
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
We create a toolbar with three action objects and one separator. 
</p>

<pre class="explanation">
newpi = Qt::Icon.new "new2.png"
openpi = Qt::Icon.new "open2.png"
quitpi = Qt::Icon.new "exit2.png"
</pre>

<p>
Toolbar action objects will display these icons.
</p>

<pre class="explanation">
toolbar = addToolBar "main toolbar"
</pre>

<p>
The <code>addToolBar</code> method of the <code>MainWindow</code>
creates a toolbar for the application. The text string gives a toolbar
a name. This name is used to reference this toolbar, because there can be 
multiple toolbars in one application. If we right click on the window area, 
we can see a checkable option, which shows/hides the toolbar. 
</p>

<pre class="explanation">
toolbar.addSeparator
</pre>

<p>
We create a vertical separator.
</p>

<pre class="explanation">
connect(quit, SIGNAL("triggered()"), 
    Qt::Application.instance, SLOT("quit()"))
</pre>

<p>
When we click on the quit action object, the application terminates. 
</p>

<img src="/img/gui/qtruby/toolbar.png" alt="Toolbar">
<div class="figure">Figure: Toolbar</div>


<h2>Undo redo</h2>

<p>
The following example demonstrates, how we can deactivate toolbar buttons 
on the toolbar. It is a common practice in GUI programming. For example 
the save button. If we save all changes of our document to the disk,
the save button is deactivated in most text editors. This way the 
application indicates to the user, that all changes are already saved. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program disables/enables
#  actions on a toolbar
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: November 2012

require 'Qt'


class QtApp &lt; Qt::MainWindow

    slots 'count()'

    def initialize
        super
        
        setWindowTitle "Toolbar"
        
        init_ui
        
        resize 250, 150
        move 300, 300

        show
    end
    
    def init_ui
        
        @count = 2
    
        undoi = Qt::Icon.new "undo.png"
        redoi = Qt::Icon.new "redo.png"
        quitpi = Qt::Icon.new "quit.png"

        toolbar = addToolBar "first toolbar"

        @und = toolbar.addAction undoi, "Undo"
        @red = toolbar.addAction redoi, "Redo"

        connect @und, SIGNAL("triggered()"), self, SLOT("count()")
        connect @red, SIGNAL("triggered()"), self, SLOT("count()")

        toolbar.addSeparator

        quit = toolbar.addAction quitpi, "Quit Application"

        connect quit, SIGNAL("triggered()"), 
            Qt::Application.instance, SLOT("quit()")
    end
    
    def count
        
        action = sender
        
        if "Undo" == action.text
            @count = @count - 1
        else 
            @count = @count + 1
        end

        if @count &lt;= 0
            @und.setDisabled true
            @red.setDisabled false
        end

        if @count >= 5
            @und.setDisabled false
            @red.setDisabled true
        end
        
    end   
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
In our example, we have three <code>Action</code> objects and a separator.
After several clicks on the undo or redo buttons, they become deactivated. Visually, the buttons 
are grayed out. 
</p>

<pre class="explanation">
@count = 2
</pre>

<p>
The <code>@count</code> variable determines, which button is activated and deactivated. 
</p>

<pre class="explanation">
connect @und, SIGNAL("triggered()"), self, SLOT("count()")
connect @red, SIGNAL("triggered()"), self, SLOT("count()")
</pre>

<p>
Clicking on the toolbar button, the <code>triggered</code> signal is emitted.
We connect this signal to the <code>count</code> method.
</p>

<pre class="explanation">
action = sender
</pre>

<p>
Both toolbar buttons call the <code>count</code> method. We need to tell
between them. This line determines, which action object actually emitted the signal. 
</p>

<pre class="explanation">
if "Undo" == action.text
    @count = @count - 1
else 
    @count = @count + 1
end
</pre>

<p>
The undo toolbar button subtracts 1 from the count variable. The 
redo adds 1. Depending on the value of the count variable, we enable/disable
the toolbar buttons.
</p>

<pre class="explanation">
if @count &lt;= 0
    @und.setDisabled true
    @red.setDisabled false
end
</pre>

<p>
The <code>setDisabled</code> method activates or deactivates the
toolbar buttons. 
</p>

<img src="/img/gui/qtruby/undoredo.png" alt="Undo redo">
<div class="figure">Figure: Undo redo</div>


<p>
In this part of the Ruby Qt tutorial, we mentioned the menus and toolbars. 
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>

<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified November 2, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

